<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="书名">
                    <el-input placeholder="书名" v-model="bookname"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input placeholder="作者" v-model="bookauthor"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click.prevent="query(1)" type="primary">查询</el-button>
                    <el-button @click.prevent="create" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-container>
            <el-main>
                <el-table
                        :data="tabledata.data"
                        style="width: 100%">
                    <el-table-column
                            label="书名"
                            prop="bookname">
                    </el-table-column>
                    <el-table-column
                            label="出版社"
                            prop="bookpress">
                    </el-table-column>
                    <el-table-column
                            label="出版日期"
                            prop="pressdate">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">
                                {{scope.row.pressdate.replace(/(\S+)\s+(\d+)[,\s]+(\d+)/,
                                                            "$3年$1$2日") }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="分类"
                            prop="category">
                    </el-table-column>
                    <el-table-column
                            label="图片"
                            prop="bookimage">
                        <template slot-scope="scope">
                            <!--                            :src="url"-->
                            <el-image
                                    :src="'../'+scope.row.bookimage"
                                    fit="contain"
                                    style="width: 80px; height: 100px">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="modify(scope.row)" size="small" type="text">编辑</el-button>
                            <el-popconfirm
                                    @confirm="remove(scope.row,'逻辑删除')"
                                    @cancel="remove(scope.row,'物理删除')"
                                    confirm-button-text="逻辑删除"
                                    cancel-button-text="物理删除"
                                    title="是否进行逻辑删除,否则进行物理删除?"
                            >
                                <el-button size="small" slot="reference" type="text">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <el-footer style="text-align: right">
            <el-pagination :page-size="pageSize" :page-sizes="[2,3,4,5]" :total="tabledata.total"
                           @current-change="query" @size-change="sizeChange"
                           background
                           layout="sizes, prev, pager, next">
            </el-pagination>
        </el-footer>
    </el-container>


    <el-dialog
            :visible.sync="dialogFormVisible"
            title="图书编辑">
        <div style="display: flex;justify-content: space-around">
            <el-form>
                <el-form-item :label-width="formLabelWidth" label="书名">
                    <el-input placeholder="书名" v-model="editBook.bookname"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="作者">
                    <el-input autocomplete="off" placeholder="作者" v-model="editBook.bookauthor"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="出版社">
                    <el-input autocomplete="off" placeholder="出版社" v-model="editBook.bookpress"></el-input>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="出版日期">
                    <el-date-picker autocomplete="off" placeholder="出版日期" type="date"
                                    v-model="editBook.pressdate"></el-date-picker>
                </el-form-item>
            </el-form>
            <el-upload
                    :before-upload="beforeAvatarUpload"
                    :on-success="handleAvatarSuccess"
                    :show-file-list="false"
                    action="../UploadImageServlet"
                    class="avatar-uploader"
                    name="image">
                <img :src="'../'+editBook.bookimage" class="avatar" v-if="editBook.bookimage"
                     v-model="editBook.bookimage">
                <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
        </div>
        <div class="dialog-footer" slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="saveBook" type="primary">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            tabledata: {page: 1},
            bookname: "",
            bookauthor: "",
            pageSize: "2",
            editBook: {bookname: "", bookauthor: "", bookpress: "", pressdate: new Date(), bookimage: ''},
            dialogFormVisible: false,
            formLabelWidth: "100px"
        },
        created() {
            this.query(1)
        },
        methods: {
            sizeChange(size) {
                this.pageSize = size;
                this.query(1)
            },
            query(page) {
                axios.get("../QueryBookServlet", {
                    params: {
                        bookname: this.bookname,
                        bookauthor: this.bookauthor,
                        currentPage: page,
                        pageSize: this.pageSize
                    }
                }).then(res => {
                    this.tabledata = res.data;
                    this.tabledata.page = page;
                })
            },
            saveBook() {
                //构建post函数
                var params = new URLSearchParams();
                if (this.editBook.pressdate instanceof Date) {
                    this.editBook.pressdate = this.editBook.pressdate.toLocaleDateString();
                    this.editBook.pressdate = this.editBook.pressdate.replace(/\//g, "-")
                }
                for (let name in this.editBook) {
                    params.append(name, this.editBook[name]);
                }
                //发送ajax post请求
                axios.post("../SaveBookServlet", params).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$message(res.data.msg);
                        this.query(1);//刷新表格
                        this.dialogFormVisible = false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                //res 是后台返回的结果,但是 此res ！=axios.res
                //res ==>axio.res.data
                //res.data ==>webpath
                this.editBook.bookimage = res.data;
                this.$forceUpdate();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') > -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像只能是图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            create() {
                this.editBook = {};
                this.dialogFormVisible = true;
            },
            modify(book) {
                //复制book的属性 =》editBook
                for (let name in book) {
                    this.editBook[name] = book[name];
                }
                let months = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];

                let m = this.editBook.pressdate.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/,
                    "$1");
                let i = months.findIndex(month => {
                    return month == m;
                })
                let date = this.editBook.pressdate.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/,
                    "$3/" + (i + 1) + "/$2");
                //将字符串转换成日期形式
                date = new Date(date);
                this.editBook.pressdate = date;
                this.dialogFormVisible = true;
            },
            remove(book,flag) {
                this.$confirm('此操作将' + flag + '该图书, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.get("../RemoveBookServlet", {
                        params: {
                            id: book.id,
                            flag:flag,
                        }
                    }).then(res => {
                        this.$message(flag + "删除成功！");
                        this.query(1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    })
</script>
</body>
</html>
<style>
    html, body, #app {
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

    .el-tabs__content {
        height: calc(100% - 68px);
    }

    .el-tab-pane {
        height: 100%;
    }
</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>